<template>
  <div id="update-password">
    <div class="title">修改密码</div>
    <div class="content">
      <div class="tip">
        经常修改密码可以提高账户安全性
        <a href="javascript: void(0)" class="update" @click="popup()">修改</a>
      </div>
    </div>
    <!-- 弹框组件 -->
    <popup v-if="showPopup" @close="popup"></popup>
  </div>
</template>
<script>
// 导入弹框组件
import popup from './components/Popup'

export default {
  components: {
    popup
  },
  data() {
    return {
      msg: '22',
      showPopup: false
    }
  },
  methods: {
    /**
     * 弹框
     *
     * @return {[type]} [description]
     */
    popup() {
      this.showPopup = !this.showPopup
    }
  }
}
</script>
<style lang="scss">
  @import '../../scss/_var.scss';
  #update-password {
    background-color: #FFFFFF;
    height: 446px;

    .title {
      font-size: 14px;
      padding: 26px 20px 22px;
      color: $color-dark;
    }

    .content {
      .tip {
        background-color: rgb(246, 246, 246);
        border-radius: 4px;
        color: #666666;
        font-size: 14px;
        height: 80px;
        line-height: 80px;
        margin: 0px 20px;
        padding: 0px 20px;
      }

      .update {
        color: #f00384;
        font-size: 14px;
        float: right;
        margin-top: 32px;
      }
    }
  }
</style>